<template>


    <el-container class="home_container">
      <el-header>
        <div>
          <img src="../assets/logo.png" width="80" height="60">
          <span>电商管理系统</span>
        </div>
        <div>
          <el-button type="primary">退出</el-button>
        </div>
      </el-header>

      <el-container>
        <el-aside width="200px" :width="isCollapse? '45px':'200px'">
          <div style="color:#fff;background-color:rgb(51,55,68);cursor:pointer; "  @click="isCollapse=!isCollapse">|||</div>
              <el-menu  default-active="1"
                          class="el-menu-vertical-demo"
                        background-color="rgb(51,55,68)"
                        text-color="#fff"
                        :collapse="isCollapse"
                        :collapse-transition="false"
                       >
                <el-submenu index="1">
                  <template slot="title"><i class="el-icon-message"></i>图书管理</template>

                    <el-menu-item index="1-1">
                     书籍列表
                    </el-menu-item>
                    <el-menu-item index="1-2">
                     添加书籍
                    </el-menu-item>

                </el-submenu>
                <el-submenu index="2">
                  <template slot="title"><i class="el-icon-menu"></i>收货地址</template>

                    <el-menu-item index="2-1">
                      <router-link to="/pagefour">页面4</router-link>
                    </el-menu-item>
                    <el-menu-item index="2-2">选项2</el-menu-item>

                </el-submenu>

              </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>

<!--    <div>-->
<!--      <h1>home页面</h1>-->
<!--      <button @click="loginOut">退出</button>-->
<!--    </div>-->


</template>

<script>
    export default {
       data(){
         return{
           menuList:[],
           isCollapse:false
         }


       },
      methods:{
         loginOut(){
           window.sessionStorage.removeItem('token');
           this.$router.push('/login')
         },
        getMenuList(){
           //请求权限
        },


      }
    }
</script>

<style scoped>

  .home_container{
    height: 100%;
  }
 .el-header{
   background: rgb(55,61,65);
   display: flex;
   justify-content: space-between;
   line-height: 60px;
   color:#fff;
   font-size: 22px;
 }
 .el-header img{
   vertical-align: middle;
 }

  .el-aside{
    background: rgb(51,55,68);
  }

  .el-main{
    background: rgb(234,237,241);
  }


</style>
